<template>
  <div>
    <div class="big_picture"></div>
    <MyButton />
    <div class="travel">
      <div class="title">
        <h2>疫情期间出行防疫政策</h2>
      </div>
      <van-field
        v-model="goCity"
        is-link
        readonly
        label="出发城市"
        placeholder="请选择所在地区"
        @click="show = true"
      />
      <van-popup v-model="show" round position="bottom">
        <van-cascader
          v-model="cascaderValue"
          title="请选择出发城市"
          :options="options"
          @close="show = false"
          @finish="onFinish"
        />
      </van-popup>

      <van-field
        v-model="toCity"
        is-link
        readonly
        label="到达城市"
        placeholder="请选择所在地区"
        @click="show2 = true"
      />
      <van-popup v-model="show2" round position="bottom">
        <van-cascader
          v-model="cascaderValue2"
          title="请选择到达城市"
          :options="options"
          @close="show2 = false"
          @finish="toFinish"
        />
      </van-popup>

      <!-- 政策查询结果 -->
      <Zhengce :from="from" :to="to" />
    </div>
  </div>
</template>

<script>
import api from "../../api/index";
import Zhengce from "./Zhengce.vue";
import MyButton from "../../components/MyButton/Mybutton.vue";
export default {
  data() {
    return {
      show: false, //弹框状态  false隐藏 true显示
      show2: false, //弹框状态  false隐藏 true显示
      goCity: "", //出发的值
      toCity: "", //到达的值
      from: "", //出发的id值
      to: "", //到达的id值
      cascaderValue: "",
      cascaderValue2: "",
      from_info: "",
      to_info: "",
      isShow: "none",
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
        {
          text: "浙江省",
          value: "330000",
          children: [{ text: "杭州市", value: "330100" }],
        },
        {
          text: "江苏省",
          value: "320000",
          children: [{ text: "南京市", value: "320100" }],
        },
      ],
    };
  },
  components: {
    Zhengce,
    MyButton,
  },
  methods: {
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ value, selectedOptions }) {
      this.from = value;
      this.show = false;
      this.goCity = selectedOptions.map((option) => option.text).join("/");
    },
    toFinish({ value, selectedOptions }) {
      this.to = value;
      this.show2 = false;
      this.toCity = selectedOptions.map((option) => option.text).join("/");
    },
    healthSearch() {
      // console.log("查询中", this.from, this.to);
      api
        .getTravelQuery({
          from: this.from,
          to: this.to,
        })
        .then((res) => {
          // console.log(res.data);
          this.from_info = res.data.result.from_info;
          this.to_info = res.data.result.to_info;
          // console.log(this.from_info);
          // console.log(this.to_info);
        });
      // 这部分回来解决——————————————————————此处有问题
      if (this.from !== "" && this.to !== "") {
        this.isShow = "block";
      } else {
        this.isShow = "none";
      }
    },
    //----------------
  },
  created() {
    api.getTravel().then((res) => {
      // console.log(res.data);
      let result = res.data.result;
      let arr = [];
      result.forEach((item) => {
        let obj = {};
        obj.text = item.province; //省份
        obj.value = item.province_id; //省份标识的id
        obj.children = []; //二级区域
        item.citys.forEach((item) => {
          let child = {};
          child.text = item.city;
          child.value = item.city_id;
          obj.children.push(child);
        });
        arr.push(obj);
      });
      // console.log(arr);
      this.options = arr;
    });
  },
};
</script>

<style lang="less" scoped>
.big_picture {
  background: url("../../assets/images/travel.jpeg") no-repeat;
  position: fixed;
  width: 100%;
  height: 100%;
  background-size: cover;
  z-index: -1;
}
.travel {
  .title {
    h2 {
      color: rgba(252, 246, 246, 0.897);
      padding: 0.2rem;
    }
  }
  .van-cell {
    background-color: rgba(252, 246, 246, 0.897);
  }
}
.anNiu {
  left: 71%;
}
</style>
